<template>
  <common-view class="my-story-page">
    <design-view>
      <div class="title-group">
        <Transition>
          <img v-if="currentPage === 0" src="../assets/img/pick_title.png" class="title-my" alt=""/>
          <img v-else src="../assets/img/second/title.png" class="title-pick" alt=""/>
        </Transition>
      </div>
      <swiper-container :lists="lists" @click="onCreatePoster" @change="onChange" type="myStory"/>
      <van-button class="btn-award  animate__animated animate__headShake animate__infinite" @click="onCheckAward">查看奖品</van-button>
    </design-view>
    <van-popup
      transition = "fade"
      class="popup"
      position="center"
      v-model="openMyAward">
        <component :is="view" btn-text="返回" @click="openPopup()"/>
    </van-popup>
  </common-view>
</template>
<script>
import SwiperContainer from '@/components/SwiperContainer.vue'
import { Button, Popup, Toast } from 'vant'
import MyAwardComponent from '@/components/MyAwardComponent.vue'
import ComposePictureView from '@/views/ComposePictureView'
import { mapState } from 'vuex'
export default {
  name: 'MyStoryView',
  components: {
    SwiperContainer,
    myAward: MyAwardComponent,
    workPreview: ComposePictureView,
    [Button.name]: Button,
    [Popup.name]: Popup
  },
  data () {
    return {
      openMyAward: false,
      view: '',
      currentPage: 0
    }
  },
  computed: {
    ...mapState(['my', 'hots', 'poster']),
    lists () {
      return [this.my, ...this.hots]
    }
  },
  methods: {
    onChange (currentPage) {
      this.currentPage = currentPage
    },
    async onCreatePoster () {
      const loading = Toast.loading({
        message: '海报生成中...',
        forbidClick: true,
        duration: 0
      })
      try {
        await this.$createPoster()
        this.openPopup('workPreview')
      } catch (e) {
      } finally {
        loading.clear()
      }
    },
    onCheckAward () {
      this.$sound && this.$sound.play()
      this.openPopup('myAward')
    },
    openPopup (name = '') {
      this.$sound && this.$sound.play()
      this.view = name
      this.openMyAward = !!name
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../assets/css/mixin.scss";
.my-story-page {
  background: url(../assets/img/second/bg.jpg) center center;
  background-size: cover;
}
.title-group {
  @include wh(525, 135);
  position: relative;
  // margin:  61px auto 22px;
  margin:  61px auto 22px;
}
.title-my {
  @include wh(492, 135);
  @include abs_center()
}
.title-pick {
  @include wh(524, 109);
  @include abs_center()
}
.btn-award {
  @include wh(479,88);
  background: url(../assets/img/second/btn_bg.png) center no-repeat;
  background-size: 100% 100%;
  border: none;
  // margin:  44px auto 0;
  margin:  34px auto 0;
  color: #fff;
  display: block;
  font-size: 40px;
}
.small {
  margin: 24px auto 0;
  .title-group {
    margin:  81px auto 2px;
  }
  .btn-award {
    margin: 14px auto 0;
  }
}
</style>
